<%--
  Created by IntelliJ IDEA.
  User: 张荣荣
  Date: 2022/3/15
  Time: 20:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>营业网点</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/image/smallLogo.svg" type="image/x-icon">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>

    <style>
        <%--        悬浮在a标签上会出现的效果--%>
        .cus_title .logo .title_list li a:hover + span {
            background-image: url("${pageContext.request.contextPath}/image/list_buttom.png");
            background-size: 12px 6px;
        }

        /*给a标签上色*/
        .cus_title .logo .title_list li .shop_outlets {
            color: #23b7b7 !important;
        }

        /*给span标签加三角形*/
        .cus_title .logo .title_list li .business_outlets {
            background-image: url("${pageContext.request.contextPath}/image/list_buttom.png");
            background-size: 12px 6px;
        }
    </style>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/branch.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/car_detail.css">
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=XWqaiRYZhVP50MOC701ii9PHsULw8XnV"></script>
</head>
<body>
<%--${branchShop.shopList}--%>
<%--${branchShop.Shop}--%>
<%--1.页头--%>
<jsp:include page="../common/head.jsp"/>
<%--<div class="title_box">--%>
<%--    <div class="cus_title">--%>
<%--        <div class="logo">--%>
<%--            <a href="" class="logo_a">--%>
<%--                <img src="${pageContext.request.contextPath}/image/left_logo.svg" alt="">--%>
<%--            </a>--%>
<%--            <div class="list_box">--%>
<%--                <ul class="title_list">--%>
<%--                    <li>--%>
<%--                        <a href="">首页</a>--%>
<%--                        <span></span>--%>
<%--                    </li>--%>
<%--                    <li>--%>
<%--                        <a href="">自驾租车</a>--%>
<%--                        <span></span>--%>
<%--                    </li>--%>
<%--                    <li>--%>
<%--                        <a href="" class="current_page">营业网点</a>--%>
<%--                        <span class="current_page_bottom"></span>--%>

<%--                    </li>--%>
<%--                    <li>--%>
<%--                        <a href="">优惠活动</a>--%>
<%--                        <span></span>--%>
<%--                    </li>--%>
<%--                    <li>--%>
<%--                        <a href="">评论分享</a>--%>
<%--                        <span></span>--%>
<%--                    </li>--%>
<%--                    <li>--%>
<%--                        <a href="" >个人中心</a>--%>
<%--                        <span></span>--%>
<%--                    </li>--%>
<%--                </ul>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--</div>--%>




<%--<div class="main">--%>

<%--    <div class="citybox_display">--%>
<%--        <div class="city_box">--%>
<%--            <p id="cityCar">苏州租车</p>--%>
<%--        </div>--%>
<%--        <div class="area_box">--%>
<%--            <a href="javascript:void(0)">机场/车站</a>--%>
<%--            <a href="javascript:void(0)">姑苏区</a>--%>
<%--            <a href="javascript:void(0)">园区</a>--%>
<%--            <a href="javascript:void(0)">新区</a>--%>
<%--            <a href="javascript:void(0)">吴中区</a>--%>
<%--            <a href="javascript:void(0)">相城区</a>--%>
<%--            <a href="javascript:void(0)">吴江区</a>--%>
<%--            <a href="javascript:void(0)">虎丘区</a>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--</div>--%>
<%--<hr >--%>
<!--主体-->
<div class="main-box">
    <div class="main-box-left" id="main-box-left" style="height: 869px">

<%--        varStatus="status"--%>
        <c:forEach var="shop" items="${branchShop.shopList}" varStatus="status">
            <div class="store-box">

                <ul>
                    <a href="${pageContext.request.contextPath}/shop/${shop.shopId}/page/1">
                        <li class="store-nummark"><c:out value="${status.count}"/></li>
                        <li class="store-name">${shop.shopName}</li>
                        <li class="store-address">${shop.shopAddress}</li>
                        <li class="store-phone">
                            门店电话：
                            <span>${shop.shopTelno}</span>
                        </li>
                        <li class="store-time">
                            营业时间：
                            <span>${shop.shopTime}</span>
                        </li>
                    </a>
                </ul>

            </div>
        </c:forEach>

<%--        <div class="store-box">--%>
<%--            <ul>--%>
<%--                <li class="store-nummark">1</li>--%>
<%--                <li class="store-name">寒山寺店</li>--%>
<%--                <li class="store-address">苏州市姑苏区和园路197号</li>--%>
<%--                <li class="store-phone">--%>
<%--                    门店电话：--%>
<%--                    <span>18013116796</span>--%>
<%--                </li>--%>
<%--                <li class="store-time">--%>
<%--                    营业时间：--%>
<%--                    <span>8:00-20:00</span>--%>
<%--                </li>--%>
<%--            </ul>--%>
<%--        </div>--%>
<%--        <div class="store-box">--%>
<%--            <ul>--%>
<%--                <li class="store-nummark">2</li>--%>
<%--                <li class="store-name">寒山寺店</li>--%>
<%--                <li class="store-address">苏州市姑苏区和园路197号</li>--%>
<%--                <li class="store-phone">--%>
<%--                    门店电话：--%>
<%--                    <span>18013116796</span>--%>
<%--                </li>--%>
<%--                <li class="store-time">--%>
<%--                    营业时间：--%>
<%--                    <span>8:00-20:00</span>--%>
<%--                </li>--%>
<%--            </ul>--%>
<%--        </div>--%>
<%--        <div class="store-box">--%>
<%--            <ul>--%>
<%--                <li class="store-nummark">3</li>--%>
<%--                <li class="store-name">寒山寺店</li>--%>
<%--                <li class="store-address">苏州市姑苏区和园路197号</li>--%>
<%--                <li class="store-phone">--%>
<%--                    门店电话：--%>
<%--                    <span>18013116796</span>--%>
<%--                </li>--%>
<%--                <li class="store-time">--%>
<%--                    营业时间：--%>
<%--                    <span>8:00-20:00</span>--%>
<%--                </li>--%>
<%--            </ul>--%>
<%--        </div>--%>
<%--        <div class="store-box">--%>
<%--            <ul>--%>
<%--                <li class="store-nummark">4</li>--%>
<%--                <li class="store-name">寒山寺店</li>--%>
<%--                <li class="store-address">苏州市姑苏区和园路197号</li>--%>
<%--                <li class="store-phone">--%>
<%--                    门店电话：--%>
<%--                    <span>18013116796</span>--%>
<%--                </li>--%>
<%--                <li class="store-time">--%>
<%--                    营业时间：--%>
<%--                    <span>8:00-20:00</span>--%>
<%--                </li>--%>
<%--            </ul>--%>
<%--        </div>--%>
<%--        <div class="store-box">--%>
<%--            <ul>--%>
<%--                <li class="store-nummark">5</li>--%>
<%--                <li class="store-name">寒山寺店</li>--%>
<%--                <li class="store-address">苏州市姑苏区和园路197号</li>--%>
<%--                <li class="store-phone">--%>
<%--                    门店电话：--%>
<%--                    <span>18013116796</span>--%>
<%--                </li>--%>
<%--                <li class="store-time">--%>
<%--                    营业时间：--%>
<%--                    <span>8:00-20:00</span>--%>
<%--                </li>--%>
<%--            </ul>--%>
<%--        </div>--%>
<%--        <div class="store-box">--%>
<%--            <ul>--%>
<%--                <li class="store-nummark">6</li>--%>
<%--                <li class="store-name">寒山寺店</li>--%>
<%--                <li class="store-address">苏州市姑苏区和园路197号</li>--%>
<%--                <li class="store-phone">--%>
<%--                    门店电话：--%>
<%--                    <span>18013116796</span>--%>
<%--                </li>--%>
<%--                <li class="store-time">--%>
<%--                    营业时间：--%>
<%--                    <span>8:00-20:00</span>--%>
<%--                </li>--%>
<%--            </ul>--%>
<%--        </div>--%>
<%--        <div class="store-box">--%>
<%--            <ul>--%>
<%--                <li class="store-nummark">7</li>--%>
<%--                <li class="store-name">寒山寺店</li>--%>
<%--                <li class="store-address">苏州市姑苏区和园路197号</li>--%>
<%--                <li class="store-phone">--%>
<%--                    门店电话：--%>
<%--                    <span>18013116796</span>--%>
<%--                </li>--%>
<%--                <li class="store-time">--%>
<%--                    营业时间：--%>
<%--                    <span>8:00-20:00</span>--%>
<%--                </li>--%>
<%--            </ul>--%>
<%--        </div>--%>
<%--        <div class="store-box">--%>
<%--            <ul>--%>
<%--                <li class="store-nummark">8</li>--%>
<%--                <li class="store-name">寒山寺店</li>--%>
<%--                <li class="store-address">苏州市姑苏区和园路197号</li>--%>
<%--                <li class="store-phone">--%>
<%--                    门店电话：--%>
<%--                    <span>18013116796</span>--%>
<%--                </li>--%>
<%--                <li class="store-time">--%>
<%--                    营业时间：--%>
<%--                    <span>8:00-20:00</span>--%>
<%--                </li>--%>
<%--            </ul>--%>
<%--        </div>--%>
<%--        <div class="store-box">--%>
<%--            <ul>--%>
<%--                <li class="store-nummark">9</li>--%>
<%--                <li class="store-name">寒山寺店</li>--%>
<%--                <li class="store-address">苏州市姑苏区和园路197号</li>--%>
<%--                <li class="store-phone">--%>
<%--                    门店电话：--%>
<%--                    <span>18013116796</span>--%>
<%--                </li>--%>
<%--                <li class="store-time">--%>
<%--                    营业时间：--%>
<%--                    <span>8:00-20:00</span>--%>
<%--                </li>--%>
<%--            </ul>--%>
<%--        </div>--%>
<%--        <div class="store-box">--%>
<%--            <ul>--%>
<%--                <li class="store-nummark">10</li>--%>
<%--                <li class="store-name">寒山寺店</li>--%>
<%--                <li class="store-address">苏州市姑苏区和园路197号</li>--%>
<%--                <li class="store-phone">--%>
<%--                    门店电话：--%>
<%--                    <span>18013116796</span>--%>
<%--                </li>--%>
<%--                <li class="store-time">--%>
<%--                    营业时间：--%>
<%--                    <span>8:00-20:00</span>--%>
<%--                </li>--%>
<%--            </ul>--%>
<%--        </div>--%>
    </div>

    <div class="main-box-right">
        <div id="container"></div>
    </div>
</div>

</body>
</html>

<script>

    <%--var date = `${branchShop.shopList}`--%>
    // console.log(date)
    var shopLongitudeList = new Array();
    var shopLatitudeList = new  Array();
    var i =0;
    <c:forEach var="shop" items="${branchShop.shopList}" varStatus="status">
    shopLongitudeList[i] = `${shop.shopLongitude}`
    shopLatitudeList[i] = `${shop.shopLatitude}`
    i++;
    </c:forEach>
    // console.log(shopLatitudeList,shopLongitudeList)


    var map = new BMapGL.Map("container");          // 创建地图实例


    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    for (var j=0;j<shopLatitudeList.length;j++){
        var point =new BMapGL.Point(shopLongitudeList[j], shopLatitudeList[j]);
        var marker = new BMapGL.Marker(point);        // 创建标注

        map.addOverlay(marker);                     // 将标注添加到地图中
    }
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

</script>
